<template>
  <!-- 头部整体盒子 -->
  <div id="header" class="container-fuild">
    <!-- 头部顶部 -->
    <div class="header-top container-fuild hidden-xs">
      <div class="container">
        <!-- <div class="server pull-left">
          <span class="glyphicon glyphicon-earphone"></span>888-888-888
          <span class="glyphicon glyphicon-envelope"></span>liyunkun_11@163.com
          <span class="glyphicon glyphicon-time"></span>7x24小时为您服务
        </div> -->
        <div class="shejiao pull-right">
          <!-- <span class="glyphicon glyphicon-hand-right"></span> -->
          <!-- <span class="glyphicon glyphicon-hand-left"></span> -->
          <span>设为首页</span>
          <span>加入收藏</span>
          <span>董事长邮箱</span>
          <span>集团官方微信</span>
        </div>
      </div>
    </div>
    <!-- 电脑导航 -->
    <div class="header-nav container hidden-xs">
      <!-- 导航logo -->
      <div class="header-nav-logo" @click="handleLogo">
        <img class="header-nav-logo-img" src="@/assets/img/logo_black.png" />
      </div>

      <!-- 导航内容 -->
      <div class="header-nav-right">
        <ul class="header-nav-wrapper">
          <li
            class="header-nav-wrapper-li"
            v-for="(item, index) in navList"
            :key="index"
            :class="index == navIndex ? '' : ''"
            @click="navClick(index, item)"
            :style="{ '--list-height': item.children.length * 30 + 'px' }"
          >
              {{ item.name }}
            <div class="HNWL-list" >
              <div
                v-for="(pages, idx) in item.children"
                :key="pages.name"
                class="HNWL-list-item"
                @click.stop="navBtnClick(index, idx, pages, item)"
              >
                {{ pages.name }}
              </div>
            </div>
          </li>
        </ul>
        <!-- <div class="header-nav-search">
          <img src="../assets/img/home/search.svg" alt="" srcset="" />
        </div> -->
      </div>
    </div>
    <!-- 手机导航 -->
    <div class="header-nav-m container-fuild visible-xs">
      <!-- <div class="header-nav-m-logo">
        <img
          class="center-block"
          src="@/assets/img/logo_black.png"
          alt="logo"
        />
      </div> -->
      <!-- <div class="header-nav-logo" style="margin: auto;">
        <img class="header-nav-logo-img" src="@/assets/img/logo_black.png" />
      </div> -->
      <!-- 导航栏 -->
      <div class="header-nav-m-menu text-center">
        <img class="header-nav-logo-img" src="@/assets/img/logo_black.png" />
        <div
          class="header-nav-m-menu-wrapper"
          data-toggle="collapse"
          data-target="#menu"
          @click="menuClick"
        >
          <img src="@/assets/img/header-r.png" alt="">
        </div>
        <!-- 导航内容 -->
        <ul id="menu" class="header-nav-m-wrapper collapse">
          <li
            v-for="(item, index) in navList"
            :key="index"
            :class="index == navIndex ? 'active' : ''"
            @click="navClick(index, item)"
            data-toggle="collapse"
            data-target="#menu"
          >
            <router-link :to="item.path">
              {{ item.name }}
              <i class="underline"></i>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from '../api';
import { mapState, mapGetters } from 'vuex';
export default {
  name: "Header",
  data() {
    return {
      navIndex: sessionStorage.getItem("navIndex")
        ? sessionStorage.getItem("navIndex")
        : 0,
      menuName: "首页",
      menuClass: "glyphicon glyphicon-menu-down",
      navList: [
        {
          name: "首页",
          path: "/",
          children: [],
        },
        {
          name: "集团概况",
          path: "/PhotoCaption",
          children: [
            {
              name: "集团简介",
              path: "/PhotoCaption",
              children: [],
            },
            {
              name: "集团视频",
              path: "/PhotoCaption",
              children: [],
            },
            {
              name: "联系我们",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        {
          name: "新闻资讯",
          path: "/newsinformation",
          children: [
            {
              name: "成员动态",
              path: "/newsinformation",
              children: [],
            },
            {
              name: "集团要闻",
              path: "/newsinformation",
              children: [],
            },
            {
              name: "生产经营动态",
              path: "/newsinformation",
              children: [],
            },{
              name: "党建动态",
              path: "/newsinformation",
              children: [],
            }
          ],
        },
        {
          name: "版块业务",
          path: "/",
          children: [
            {
              name: "建筑施工",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "基建投资",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "工业制造",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "海外发展",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "现代服务业",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        {
          name: "企业文化",
          path: "/PhotoCaption",
          children: [
            {
              name: "群英谱",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "文化故事集",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "党建宣传片",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "浙建美丽乡村建设",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "保密公益宣传片",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        {
          name: "企业资质",
          path: "/PhotoCaption",
          children: [
            {
              name: "集团资质",
              path: "/PhotoCaption",
              children: [],
            },
            {
              name: "核心成员单位资质",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        {
          name: "信息发布",
          path: "/newsinformation",
          children: [
            {
              name: "经济指标",
              path: "/newsinformation",
              children: [],
            },
            {
              name: "三重一大",
              path: "/newsinformation",
              children: [],
            },
            {
              name: "社会责任",
              path: "/newsinformation",
              children: [],
            },
            {
              name: "通知公告",
              path: "/newsinformation",
              children: [],
            },
          ],
        },
        {
          name: "加入我们",
          path: "/",
          children: [
            {
              name: "招聘公告",
              path: "/PhotoCaption",
              children: [],
            },
            {
              name: "校园招聘",
              path: "/PhotoCaption",
              children: [],
            },
            {
              name: "社会招聘",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        {
          name: "投资者关系",
          path: "/",
          children: [
            {
              name: "公司公告",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "业绩报告",
              path: "/PhotoCaption",
              children: [],
            },{
              name: "投资者服务",
              path: "/PhotoCaption",
              children: [],
            },
          ],
        },
        // {
        //   name: "软件产品",
        //   path: "/software",
        //   children: [
        //     {
        //       name: "智能小镇管理系统",
        //       path: "/software/smartTown",
        //     },
        //     {
        //       name: "大数据管理系统",
        //       path: "/software/bigData",
        //     },
        //   ],
        // },
        // {
        //   name: "相关服务",
        //   path: "/service",
        //   children: [],
        // },
        // {
        //   name: "新闻动态",
        //   path: "/newsinformation",
        //   children: [],
        // },
        // {
        //   name: "公司介绍",
        //   path: "/companyintroduction",
        //   children: [],
        // },
        // {
        //   name: "工作机会",
        //   path: "/jobchance",
        //   children: [],
        // },
        // {
        //   name: "联系我们",
        //   path: "/contactus",
        //   children: [],
        // },
      ],
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**点击logo */
    handleLogo() {
      this.$router.push('aboutUs')
    },

    navClick(index, item) {
       document.title = item.name
      if (item.type == 2) {
        this.navIndex = index;
        this.$router.push({ path: item.path, query: { navIndex: index, navIndex2: 0,  navName: item.name} });
        this.menuName = item.name;
      } else if (item.type == 3) {
        window.open(item.path, '_blank');
      }


    },
    navBtnClick(index, idx, pages, item) {
      document.title = pages.name
      if (pages.type == 2) {
        this.navIndex = index;
        this.$router.push({ path: item.path, query: { navIndex: index, navIndex2: idx,  navName: item.name, navName2: pages.name} });
        this.menuName = item.name;
      } else if (pages.type == 3) {
        window.open(pages.path, '_blank');
      }

    },
    menuClick() {
      if (this.menuClass == "glyphicon glyphicon-menu-down") {
        this.menuClass = "glyphicon glyphicon-menu-up";
      } else {
        this.menuClass = "glyphicon glyphicon-menu-down";
      }
    },
  //获取导航栏信息 存储vuex
    async getList() {
      let data = {
        type:  0,
				siteId: sessionStorage.getItem('siteId'),
        // siteId: 'ST-20241124222158'
      }
      try {
        const response  = await get('/con/category/listByType', data);
        this.navList = response.resData
        this.$store.commit('headerData', response.resData);
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    },
  },
};
</script>
<style scoped>
/* 顶部 */
#header {
  /* background: #f4f4f4; */
  background-color: #fff;
  transition: all ease 0.6s;
}
.active {
  background: #004098;
  color: #fff;
}
.header-top {
  height: 20px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  /* background: #1890FE; */
  color: #000000;
}

/* 顶部的图标 */
.header-top span {
  margin: 0 20px;
}

.shejiao {
  display: flex;
}

/* 导航栏 */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* height: 110px; */
  height: 71px;
  position: relative;
}

/* 去掉伪元素 */
.header-nav::before,
.header-nav::after {
  display: none;
}

/* 导航栏logo */
.header-nav-logo {
  width: 160px;
  height: 100%;
}
/* 导航栏logo图片 */
.header-nav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-nav-right {
  display: flex;
  align-items: center;
}

.header-nav-wrapper {
  /* line-height: 110px; */
  /* line-height: 60px; */
  height: 71px;
  bottom: 0;
  margin-bottom: 0;
  margin-right: 10px;
  max-width: 800px;
  display: flex;
  align-items: center;
}

/* 导航栏 每个导航 */

.header-nav-wrapper-li {
  display: flex;
  align-items: center;
  text-align: center;
  height: 40px;
  padding: 0 15px;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  white-space: nowrap;
}

.header-nav-wrapper-li:hover {
  background-color: #004098;
  color: #fff;
}

.header-nav-wrapper-li:hover .HNWL-list {
  height: var(--list-height);
}

/**下拉菜单 */
.HNWL-list {
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 9;
  min-width: 100%;
  overflow: hidden;
  height: 0px;
  transition: height 0.3s;
  background-color: #fff;
  color: #000000;
  font-size: 14px;
}

.HNWL-list-item {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #fff;
  padding: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
}

.HNWL-list-item:hover {
  background-color: #004098;
  color: #fff;
}

@media screen and (max-width: 997px) {
  #header .header-nav-m {
    position: relative;
  }
  /* 导航栏logo容器 */
  #header .header-nav-m .header-nav-m-logo {
    height: 80px;
    position: relative;
  }
  /* 导航栏logo图片 */
  #header .header-nav-m .header-nav-m-logo img {
    width: 95px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .header-nav-logo-img {
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -20px;
    z-index: 999999;
    width: 40%;
    height: 70%;
  }
  /* 导航栏  菜单容器 */
  #header .header-nav-m .header-nav-m-menu {
    color: #fff;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    background: #474747;
    position: relative;
  }
  /* 导航栏 菜单图标 */
  #header .header-nav-m .header-nav-m-menu-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -20px;
    width: 50px;
    height: 40px;
    color: #fff;
    z-index: 999999;
    font-size: 12px;
  }
  #header .header-nav-m .header-nav-m-menu-wrapper img {
    position: absolute;
    top: 70%;
    right: 5px;
    margin-top: -20px;
    width: 55%;
    height: 70%;
    color: #fff;
    z-index: 999999;
  }
  /* 导航栏 */
  #header .header-nav-m .header-nav-m-wrapper {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #474747;
    z-index: 9999999;
  }
  /* 导航栏 每个导航 */
  #header .header-nav-m .header-nav-m-wrapper > li {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  /* 导航栏 每个导航下面的 a 链接 */
  #header .header-nav-m .header-nav-m-wrapper > li > a {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 0;
    position: relative;
  }
  /* 导航栏 每个导航下面的 a 链接的右侧小三角 */
  #header .header-nav .header-nav-wrapper > li > a > span {
    font-size: 10px;
  }
}
</style>
